<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
</head>
<body>
<input type="text" >
<input type="button" value="前面添加">
<input type="button" value="后面添加">
<input type="button" value="上海前面">
<input type="button" value="上海后面">
<input type="button" value="删除上海">
<hr>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>
<a href="http://www.bilibili.com">超链接</a>

<script src="../js/jquery-1.4.2.js"></script>

<script>
    $("input:eq(1)").click(function(){
        //let li = $("<li>"+$("input:first").val()+"</li>")
        //$("ul").prepend(li);
        let li = $("<li></li>");//创建li
        li.text($("input:first").val());
        $("ul").prepend(li);

    })
    $("input:eq(2)").click(function(){
        //let li = $("<li>"+$("input:first").val()+"</li>")
        //$("ul").prepend(li);
        let li = $("<li></li>");//创建li
        li.text($("input:first").val());
        $("ul").append(li);//添加li到ul里面
    })
    $("input:eq(3)").click(function(){
        //let li = $("<li>"+$("input:first").val()+"</li>")
        //$("ul").prepend(li);
        let li = $("<li></li>");//创建li
        li.text($("input:first").val());
        $("li:contains('上海')").before(li);
    })
    $("input:eq(4)").click(function(){
        //let li = $("<li>"+$("input:first").val()+"</li>")
        //$("ul").prepend(li);
        let li = $("<li></li>");//创建li
        li.text($("input:first").val());
        $("li:contains('上海')").after(li);
    })
    $("input:eq(5)").click(function(){
        //let li = $("<li>"+$("input:first").val()+"</li>")
        //$("ul").prepend(li);
        let li = $("<li></li>");//创建li
        li.text($("input:first").val());
        $("li:contains('上海')").remove();
    })
    //修改页面中最后一个li的文本为黑龙江
    $("li:last").html("<b>黑龙江</b>")
    //修改元素的样式
    $("li:first").css("color","red")
    //获取元素的样式
    alert($("li:first").css("color"));

    $("li:last").css({"background-color":"yellow","color":"blue"});

    alert($("a").attr("href"));
    // $("a").attr("href","http://www.tmooc.cn");

</script>


</body>
</html>